<template>
    <view class="bg-content">
        <view class="qiun-columns">
            <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
                <view class="qiun-title-dot-light">基本折线图</view>
            </view>
            <view class="qiun-charts">
                <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
            </view>
        </view>
    </view>
</template>

<script>

    import uCharts from '@/components/u-charts/u-charts.min.js';

    var _self;
    var canvaLineA = null;

    export default {
        data() {
            return {}
        },
        onReady() {
            _self = this;
            let chartData = {
                categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
                series: [{
                    name: '成交量A',
                    data: [35, 20, 25, 37, 4, 20],
                    color: '#000000'
                }, {
                    name: '成交量B',
                    data: [70, 40, 65, 100, 44, 68]
                }, {
                    name: '成交量C',
                    data: [100, 80, 95, 150, 112, 132]
                }]
            }

            canvaLineA = new uCharts({
                $this: _self,
                canvasId: 'canvasLineA',
                type: 'line',
                fontSize: 11,
                legend: {show: true},
                dataLabel: false,
                dataPointShape: true,
                background: '#FFFFFF',
                pixelRatio: 1,
                categories: chartData.categories,
                series: chartData.series,
                animation: true,
                xAxis: {
                    type: 'grid',
                    gridColor: '#CCCCCC',
                    gridType: 'dash',
                    dashLength: 8
                },
                yAxis: {
                    gridType: 'dash',
                    gridColor: '#CCCCCC',
                    dashLength: 8,
                    splitNumber: 5,
                    min: 10,
                    max: 180,
                    format: (val) => {
                        return val.toFixed(0) + '元'
                    }
                },
                width: this.cWidth,
                height: this.cHeight,
                extra: {
                    line: {
                        type: 'straight'
                    }
                }
            });
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .charts {
        width: 750 upx;
        height: 500 upx;
        background-color: #FFFFFF;
    }
</style>
